<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
        }

        .container {
            width: max-content;
            margin: 0 auto;
            background-color: rgb(243, 255, 175);
            padding: 20px 100px;
        }
        .up{
            text-align: center;
            color: blue;
        }
        .down{
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="up"></div>
    <div class="down"></div>
</div>

</body>
<script>
    draw_xing_up(9)
    draw_xing_down(9)

    function draw_xing_up(num) {
        let node = document.getElementsByClassName('up');
        let str = '';

        for (n = 1; n <= num; n = n + 2) {

            for (let i = 0; i < n; i++) {
                str = str + '*';
            }

            let newLine = document.createElement("br");
            let child = document.createTextNode(str);
            str='';
            node[0].appendChild(child)
            node[0].appendChild(newLine)
        }


    }
    function draw_xing_down(num){
        let node = document.getElementsByClassName('down');
        let str = '';

        for (n = num; n >= 1; n = n - 2) {

            for (let i = n; i > 0; i--) {
                str = str + '*';

            }

            let newLine = document.createElement("br");
            let child = document.createTextNode(str);
            str='';
            node[0].appendChild(child)
            node[0].appendChild(newLine)
        }
    }



</script>
</html>